<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>Canvas Draw Focus Ring Example</title>
  <!--
    https://www.w3.org/TR/2010/WD-2dcontext-20100304/#dom-context-2d-drawfocusring
  -->
  <style>
    body {
      background: white;
    }
    html :focus {
      outline: 2px solid red;
    }
  </style>
</head>
<body>

  <p>Draw the focus outline of a nested input element.</p>

  <p>Chrome: <code>Enable experimental canvas features</code> in <code>about:flags</code></p>
  <p>Firefox: <code>canvas.customfocusring.enabled</code> in <code>about:config</code></p>
  <p>Caution: does not work in any browser at the moment</p>

  <input type="text" value="before">

  <canvas height="400" width="750">
   <label><input type="checkbox" id="showA"> Show As</label>
   <label><input type="checkbox" id="showB"> Show Bs</label>
  </canvas>
  <input type="text" value="after">

  <script>
    var canvas = document.getElementsByTagName('canvas')[0];
    var context = canvas.getContext('2d');
    if (!context.drawFocusRing) {
      alert("does not support drawFocusRing");
    }

    function drawCheckbox(context, element, x, y) {
      var label = element.parentElement.textContent;
      context.save();
      context.font = '10px sans-serif';
      context.textAlign = 'left';
      context.textBaseline = 'middle';
      var metrics = context.measureText(label);
      context.beginPath();
      context.strokeStyle = 'black';
      context.rect(x-5, y-5, 10, 10);
      context.stroke();
      if (element.checked) {
        context.fillStyle = 'blue';
        context.fill();
      }
      context.fillText(label, x+5, y);
      context.beginPath();
      context.rect(x-7, y-7, 12 + metrics.width+2, 14);
      if (context.drawFocusRing(element, x, y, true)) {
        context.strokeStyle = 'red';
        context.stroke();
      }
      context.restore();
    }
    function drawBase() { /* ... */ }
    function drawAs() { console.log("A") }
    function drawBs() { console.log("B") }
    function redraw() {
      context.clearRect(0, 0, canvas.width, canvas.height);
      drawCheckbox(context, document.getElementById('showA'), 20, 40);
      drawCheckbox(context, document.getElementById('showB'), 20, 80);
      drawBase();
      if (document.getElementById('showA').checked)
        drawAs();
      if (document.getElementById('showB').checked)
        drawBs();
    }
    function processClick(event) {
      var canvas = document.getElementsByTagName('canvas')[0];
      var context = canvas.getContext('2d');
      var x = event.clientX - canvas.offsetLeft;
      var y = event.clientY - canvas.offsetTop;
      drawCheckbox(context, document.getElementById('showA'), 20, 40);
      if (context.isPointInPath(x, y))
        document.getElementById('showA').checked = !(document.getElementById('showA').checked);
      drawCheckbox(context, document.getElementById('showB'), 20, 80);
      if (context.isPointInPath(x, y))
        document.getElementById('showB').checked = !(document.getElementById('showB').checked);
      redraw();
    }
    document.getElementsByTagName('canvas')[0].addEventListener('focus', redraw, true);
    document.getElementsByTagName('canvas')[0].addEventListener('blur', redraw, true);
    document.getElementsByTagName('canvas')[0].addEventListener('change', redraw, true);
    document.getElementsByTagName('canvas')[0].addEventListener('click', processClick, false);
    redraw();
  </script>
</body>
</html>
